<template>
  <div class="pageTwo content">
    <h1>组装车间生产信息可视化系统</h1>
    <div class="topBox">
      <img src="../assets/img/msg.png" alt="" id="img" />
      <div class="leftbox">
        <div
          class="scroll-text"
          :style="{ animationDuration: duration }"
          ref="scrollContainer"
        >
          中探集团精密加工部欢迎您!
        </div>
      </div>

      <div class="rightbox">
        <span>车间：</span>
        <el-select
          placeholder="请选择车间"
          v-model="queryParams.workshopId"
          @change="workshopChange"
        >
          <el-option
            v-for="item in workshopList"
            :key="item.workshopId"
            :label="'[' + item.workshopCode + ']' + ' ' + item.workshopName"
            :value="item.workshopId"
          >
          </el-option>
          <el-option label="综合数据看板" value="0"></el-option>
        </el-select>

        <span style="margin: 5px 0 0 40px">{{ nowDate }}</span>
      </div>
    </div>
    <div class="contentbox1">
      <!-- <dv-border-box-9 class="itembox1" :color="['#2b5f94', '#46c2e7']"> -->
      <div class="itembox1">
        <dv-border-box-11
          :titleWidth="90"
          :color="['#46c2e7', '#2b5f94']"
          title="1"
          ><h3>压接帽盖</h3></dv-border-box-11
        >
        <dv-decoration-11 :color="['#2b5f94', '#46c2e7']"></dv-decoration-11>
        <dv-border-box-11
          :titleWidth="90"
          :color="['#46c2e7', '#2b5f94']"
          title="2"
          ><h3>锁枪头螺丝</h3></dv-border-box-11
        >
        <dv-decoration-11 :color="['#2b5f94', '#46c2e7']"></dv-decoration-11>
        <dv-border-box-11
          :titleWidth="90"
          :color="['#46c2e7', '#2b5f94']"
          title="3"
          ><h3>电气性能测试</h3></dv-border-box-11
        >
      </div>

      <dv-border-box-3 class="itembox2" :color="['#339ebe', '#3872ac']">
        <dv-decoration-7
          style="width: 180px; height: 30px"
          class="span"
          :color="['#2b5f94', '#44afcf']"
          >正在进行的工单</dv-decoration-7
        >
        <div class="radio">
          <el-radio-group
            v-model="statussValue"
            @change="statusChange"
            size="medium "
          >
            <el-radio class="checked1" label="0">全部</el-radio>
            <el-radio class="checked2" label="1">已完成</el-radio>
            <el-radio class="checked3" label="2">进行中</el-radio>
          </el-radio-group>
        </div>
        <div class="table">
          <rightBox></rightBox>
        </div>
      </dv-border-box-3>
    </div>
    <div class="contentbox2">
      <dv-border-box-2 class="item2box1" :color="['#46c2e7', '#2b5f94']">
        <span>生产进度</span>
        <div class="select">
          【 产线:
          <el-select v-model="queryParams.workshopId" @change="lineChange">
            <el-option
              v-for="item in lineList"
              :key="item.id"
              :label="'[' + item.workshopCode + ']' + ' ' + item.workshopName"
              :value="item.workshopId"
            >
            </el-option>
            <el-option label="综合数据看板" value="0"></el-option>
          </el-select>
          】
        </div>
        <bttmTable></bttmTable>
      </dv-border-box-2>
      <dv-border-box-10
        :reverse="true"
        class="item2box2"
        :color="['#1d4469', '#46c2e7']"
      >
        <span>工单达成率</span>
        <bottomBar></bottomBar>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
// import barView from "./components/workShop2/barView.vue";
import bottomBar from "./components/assembly/bottomBar.vue";
import bttmTable from "./components/assembly/bottmTable.vue";
import { getDatails, selectWorkShop, selectLine } from "@/api/assembly";
import rightBox from "./components/total/rightBox.vue";
export default {
  name: "assemblyModel",
  components: { rightBox, bottomBar, bttmTable },
  // 添加其他选项
  data() {
    return {
      nowDate: "",
      dataList: {},
      timer: null,
      queryParams: {
        workshopId: null,
      },
      workshopList: [],
      lineList: [],
      //  文字滚动
      duration: "0s",
      statussValue: "0",
    };
  },
  created() {
    this.updateTime();
    this.getWorkShop();
  },
  watch: {},
  beforeDestroy() {
    // clearTimeout(this.timer);
  },
  //文字滚动
  mounted() {
    this.$nextTick(() => {
      const textWidth = this.$refs.scrollContainer.scrollWidth;
      let duration = textWidth / 20;
      // 设置一定速度值，避免太短或太长导致过快或过慢
      if (duration < 1.5) {
        duration = 1.5;
      } // 10s for 1000px
      this.duration = duration + "s";
    });
  },
  methods: {
    //时间走动
    updateTime() {
      const today = new Date();
      let y = today.getFullYear();
      let mt = today.getMonth() + 1; // 月份是从0开始的
      let d = today.getDate();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      mt = mt < 10 ? "0" + mt : mt;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      const timeString =
        y + "年" + mt + "月" + d + "日" + h + ":" + m + ":" + s;
      // 显示时间到页面上的元素
      this.nowDate = timeString;
      // 每秒更新时间
      setTimeout(this.updateTime, 1000);
    },
    //状态
    statusChange() {},
    // 车间
    getWorkShop() {
      selectWorkShop().then((res) => {
        this.workshopList = res.rows;
      });
    },
    workshopChange(value) {
      if (value === "0") {
        this.$router.push({ path: "/home" });
      }
      sessionStorage.setItem("value1", value);
      // selectLine(value).then((res) => {
      //   this.lineList = res.rows;
      // });
      this.getList();
    },
    //获取数据
    getList(value) {
      // getDatails(value).then((res) => {
      //   this.dataList = res.data;
      // });
      // this.timer = setTimeout(() => {
      //   this.getData(sessionStorage.getItem("productionId"));
      // }, 60000);
    },
    //产线
    lineChange(value) {},
  },
};
</script>

<style scoped lang="scss">
.pageTwo {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/img/back1.png") no-repeat center center fixed;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 999;
}

html,
body {
  margin: 0;
  padding: 0;
}
h1 {
  position: absolute;
  color: #9be5fb;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
  /* margin-top: 1%; */
  letter-spacing: 5px;
  margin-left: 36%;
}
#img {
  position: absolute;
  width: 35px;
  height: 35px;
}
.topBox {
  width: 93%;
  margin: 2% 0 0 3%;
  display: flex;
  justify-content: space-between;
  .rightbox {
    width: auto;
    display: flex;
    align-items: flex-start;
    span {
      font-size: 20px;
      color: #8993f2;
    }
  }
}
.leftbox {
  width: 450px;
  overflow: hidden;
  margin-left: 40px;
  .scroll-text {
    font-size: 27px;
    color: #8993f2;
    letter-spacing: 8px;
    // position: absolute;
    white-space: nowrap;
    animation: scrollText 0s linear infinite;
    transition: transform 0.3s ease-out;
  }
}
@keyframes scrollText {
  0% {
    /* 播放完成循环播放 */
    transform: translateX(300px);
  }
  100% {
    transform: translateX(-100%);
  }
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #8993f2;
  /* height: 25px !important; */
  font-size: 18px !important;
}
/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;
  .el-input {
    input {
      font-size: 14px !important;
      height: 30px !important;
      border-color: rgba(44, 137, 229, 0.5);
      color: #8993f2 !important;
    }
  }
}
/**修改下拉图标颜色 */
::v-deep .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-arrow-up:before {
      color: #8993f2;
    }
  }
}

.contentbox1 {
  display: flex;
  margin: 2% 0 0 3%;
  width: 93.5%;
  height: 44vh;
  .itembox1 {
    display: flex;
    width: 82%;
    height: 92%;
    margin-right: 10px;
    .itembox {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 20px;
    }
    h3 {
      color: #46c2e7;
      text-align: center;
      line-height: 130px;
      font-weight: 700;
    }
    .dv-border-box-11 {
      width: 200px;
      height: 120px;
    }
    .dv-decoration-11 {
      width: 160px;
      height: 50px;
      margin-top: 40px;
    }
  }
  .itembox2 {
    color: #339ebe;
    width: 550px;
    height: 100%;
    .radio {
      position: absolute;
      margin: -40px 0 0 250px;
    }
    .span {
      position: absolute;
      font-size: 18px;
      line-height: 34px;
      font-weight: 700;
      margin: -50px 0 0 0px;
    }
    .table {
      width: 96%;
      height: 88%;
      margin-left: 2%;
      overflow: hidden;
      margin-top: 25px;
    }
  }
}

.contentbox2 {
  display: flex;
  margin-top: 20px;
  width: 94%;
  margin-left: 3%;
  height: 42vh;
  span {
    color: #339ebe;
    margin: -35px 0 0 20px;
    position: absolute;
    font-size: 18px;
    font-weight: 700;
  }
  .item2box1 {
    width: 55%;
    height: 97%;
    margin-right: 20px;
    .select {
      position: absolute;
      margin: -35px 0 0 100px;
      color: #339ebe;
    }
  }
  .item2box2 {
    width: 43%;
    height: 96%;
    span {
      margin: -25px 0 0 10px;
    }
  }
}
::v-deep .select .el-select {
  width: 140px;
  .el-input {
    input {
      height: 22px !important;
      width: 140px !important;
    }
  }
}
::v-deep .select .el-select .el-input .el-select__caret {
  margin: 10px 0 0 0;
}
::v-deep .el-radio {
  margin-left: -15px;
  .el-radio__label {
    color: #339ebe !important;
    font-size: 15px !important;
    margin-top: 8px;
    margin-left: -8px;
  }
}
</style>
